<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-col :span="12">
              <a-form-model-item label="配方名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="formulaName">
                <a-input v-model="model.formulaName" placeholder="请输入配方名称"  ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="配方编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fcNo">
                <a-input v-model="model.fcNo" placeholder="请输入配方编号"  ></a-input>
              </a-form-model-item>
            </a-col>
          </a-col>
        </a-row>
        <div class='add-box'>
          <a-button type="link" icon="plus" @click='addCavity'>添加出口粉配方</a-button>
        </div>
        <a-form-model-item :labelCol="labelCol3" :wrapperCol="wrapperCol3">
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="" :labelCol="labelCol" :wrapperCol="wrapperCol3">
                <div class='mark-infos'>
                  <a-table
                    ref="markTable"
                    size="middle"
                    :scroll="{x:false,y:false}"
                    bordered
                    :rowKey="(record = () => record.id)"
                    :columns="columns"
                    :dataSource="model.eneFormulaTslExportDetails"
                    :pagination="false"
                    :loading="loading"
                    class="j-table-force-nowrap1">
                    <template slot="action" slot-scope="text, record,index">
                      <a-popconfirm title="确定删除吗?" @confirm="() => deleteCavity(index)">
                        <a>删除</a>
                      </a-popconfirm>
                    </template>
                    <template v-for="col in ['ingredientsId','specification','formula','w1000kg','w3500kg','w4000kg','w5000kg','w6000kg']" :slot="col" slot-scope="text, record, indx">
                      <div :key="record.id">
                        <a-form-model-item v-if="col==='ingredientsId'">
                          <a-input v-model="record.ingredientsId" placeholder="请输入aaqa"/>
                        </a-form-model-item>
                        <a-form-model-item v-else-if="col==='specification'">
                          <a-input v-model="record.specification" placeholder="请输入"/>
                        </a-form-model-item >
                        <a-form-model-item v-else-if="col==='formula'">
                          <a-input v-model="record.formula" placeholder="请输入配方%" @change="onChange(record)"/>
                        </a-form-model-item >
                        <a-form-model-item v-else-if="col==='w1000kg'" >
                          <a-input v-model="record.w1000kg" disabled/>
                        </a-form-model-item >
                        <a-form-model-item v-else-if="col==='w3500kg'" >
                          <a-input v-model="record.w3500kg" disabled/>
                        </a-form-model-item >
                        <a-form-model-item v-else-if="col==='w4000kg'" >
                          <a-input v-model="record.w4000kg" disabled/>
                        </a-form-model-item >
                        <a-form-model-item v-else-if="col==='w5000kg'" >
                          <a-input v-model="record.w5000kg" disabled/>
                        </a-form-model-item >
                        <a-form-model-item v-else-if="col==='w6000kg'" >
                          <a-input v-model="record.w6000kg" disabled/>
                        </a-form-model-item >
                      </div>
                    </template>
                  </a-table>
                </div>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model-item>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

import { httpAction, getAction, postAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'EneFormulaTslExportForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
          eneFormulaTslExportDetails: [
            {
              id: '',
              ingredientsId: '',
              specification: '',
              formula: '',
              w1000kg: '',
              w3500kg: '',
              w4000kg: '',
              w5000kg: '',
              w6000kg: ''
            }
          ]
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        labelCol3: {
          xs: { span: 24 },
          sm: { span: 3 }
        },
        wrapperCol3: {
          xs: { span: 24 },
          sm: { span: 24 }
        },
        confirmLoading: false,
        validatorRules: {
        },
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function(t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            title: '物料名称',
            align: 'center',
            dataIndex: 'ingredientsId',
            scopedSlots: { customRender: 'ingredientsId' }
          },
          {
            title: '物料规格',
            align: 'center',
            dataIndex: 'specification',
            scopedSlots: { customRender: 'specification' }
          },
          {
            title: '配方(%)',
            align: 'center',
            dataIndex: 'formula',
            scopedSlots: { customRender: 'formula' }
          },
          {
            title: 'w1000kg',
            align: 'center',
            dataIndex: 'w1000kg',
            scopedSlots: { customRender: 'w1000kg' }
          },
          {
            title: 'w3500kg',
            align: 'center',
            dataIndex: 'w3500kg',
            scopedSlots: { customRender: 'w3500kg' }
          },
          {
            title: 'w4000kg',
            align: 'center',
            dataIndex: 'w4000kg',
            scopedSlots: { customRender: 'w4000kg' }
          },
          {
            title: 'w5000kg',
            align: 'center',
            dataIndex: 'w5000kg',
            scopedSlots: { customRender: 'w5000kg' }
          },
          {
            title: 'w6000kg',
            align: 'center',
            dataIndex: 'w6000kg',
            scopedSlots: { customRender: 'w6000kg' }
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            fixed: 'right',
            width: 147,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          add: "/craft/eneFormulaTslExport/add",
          edit: "/craft/eneFormulaTslExport/edit",
          queryById: "/craft/eneFormulaTslExport/queryById"
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      onChange(record){
        if(record){
          postAction('/craft/eneFormulaTslExport/compute/formula',record).then(
            (res)=>{
              if(res.success){
                this.$set(record, 'w1000kg', res.result.w1000kg);
                this.$set(record, 'w3500kg', res.result.w3500kg);
                this.$set(record, 'w4000kg', res.result.w4000kg);
                this.$set(record, 'w5000kg', res.result.w5000kg);
                this.$set(record, 'w6000kg', res.result.w6000kg);
              }
            })
        }
      },
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      addCavity() {
        if (!this.model.eneFormulaTslExportDetails) {
          this.$set(this.model, 'eneFormulaTslExportDetails', [])
        }
        this.model.eneFormulaTslExportDetails.push({
          id: '',
          ingredientsId: '',
          specification: '',
          formula: '',
          w1000kg: '',
          w3500kg: '',
          w4000kg: '',
          w5000kg: '',
          w6000kg: ''
        })
      },
      deleteCavity(originalIndex) {
        let len = this.model.eneFormulaTslExportDetails.length
        if (len > 1) {
          this.model.eneFormulaTslExportDetails.splice(originalIndex, 1)
        } else {
          this.$message.error('最少保留一个出口粉配方！')
        }
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
         
        })
      },
    }
  }
</script>
<style lang="scss" scoped>
.title {
  font-size: 24px;
  font-weight: bold;
}

.unit {
  padding-left: 4px;
  line-height: 40px;
}

.query-group-cust {
  width: 100% !important;
}

.ant-input-number {
  width: 100% !important;
}

.cavity-box {
  .title-box {
    height: 40px;
    padding: 0 5px;
    line-height: 40px;

    span {
      font-size: 24px;
      font-weight: bold;
      float: left;
    }

    .ant-btn-link {
      float: right;
    }
  }

  .mark-infos {
    position: relative;

    .editable-add-btn {
      position: absolute;
      top: 10px;
      right: 18px;
      z-index: 202;
    }
  }
}
::v-deep .ant-table-row {
  height: 48px !important;
}
</style>